import wrapperTpl from './tpl/index.tpl';
import itemTpl from './tpl/item.tpl'
import './index.scss';
import { replaceTpl } from '../../libs/utils';

export default {
    name: 'NavBar',
    _curIdx: 0,
    //生成DOM结构
    tpl(data) {
        let itemList = '';
        data.map((item, index) => {
            itemList += replaceTpl(itemTpl, {
                isCurrent: !index ? 'current' : '',
                type: item.type,
                title: item.title
            })
        })
        return replaceTpl(wrapperTpl, {
            itemList,
        })
    },
    //绑定事件处理函数
    bindEvent(setType) {
        const oNavBar = document.querySelector('.nav');

        oNavBar.addEventListener('click', this._navBarClick.bind(this, setType), false)
    },
    _navBarClick(setType) {
        const tar = arguments[1].target;
        const type = tar.dataset.type;
        setType(type);
        const oNavItems = document.querySelectorAll('.item');
        const className = tar.className.trim();
        if (className === 'item') {
            const type = tar.dataset.type;
            oNavItems[this._curIdx].className = 'item'
            this._curIdx = [].indexOf.call(oNavItems, tar);
            oNavItems[this._curIdx].className += ' current'
        }
    }
}